{#物资申请页 流程发起页#}
{% extends "personal_center/zichan_base.html" %}


{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
{% endblock %}
{% block style %}

    <style>
        .add_class {
            background: #1E90FF;
        }

        .tab_top {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }

        table tr {
            height: 35px;
        }

        .wrapper {
            background: #FFFFFF;
            border: none;
        }
    </style>
{% endblock %}

{% block right_content %}
    <div class="headline">
        <div class="tab_top ">物资申请</div>
        <div style="line-height: 30px; text-align: right;display: inline-block; position: relative;left: 85%">
            <a style="width: 100px; height: 30px; background: #1E90FF; border-radius: 4px;color: #FFFFFF;border: none; text-align: center"
               type="button" onclick="sub_data()">
                提交</a>
        </div>
    </div>
    <div style="width: 100%; height: auto; min-height: 95%; padding: 0 15%; background: #FFFFFF">
        <div style="background: #FFFFFF;padding-top: 20px;">
            <table id="table_01" style="border-collapse: collapse;border-color: #DCDCDC;" cellspacing="0"
                   cellpadding="2" width="100%" border="1">
                <thead>
                <tr>
                    <td colspan="5" style="text-align: center;"><h3>京山市人民医院物资申请单</h3></td>
                </tr>

                <tr>
                    <td colspan="5" style="padding-left: 5px;background: #dfdfdf;">基本信息</td>
                </tr>

                <tr>
                    <td style="text-align: right;padding-right: 10px">申&nbsp;&nbsp;请&nbsp;&nbsp;人</td>
                    <td style="padding-left: 10px">{{ realname }}</td>
                    <td colspan="2" style="text-align: right;padding-right: 10px">
                        申请部门
                    </td>
                    <td colspan="" style="padding-left: 10px">{{ department }}</td>
                </tr>
                <tr>
                    <td style="text-align: right;padding-right: 10px">申请日期</td>
                    <td colspan="4" id="order_date" style="padding-left: 10px">
                        {% now 'Y-m-d' %}
                    </td>
{#                    <td colspan="2" style="text-align: right;padding-right: 10px">联系方式</td>#}
{#                    <td style="text-align: left;padding-left: 10px;">{{ phone }}</td>#}
                </tr>

                <tr>
                    <td colspan="5" style="padding-left: 5px;background: #dfdfdf;">采购信息</td>
                </tr>

                <tr>
                    <th style="text-align: center; width: 10%;">序号</th>
                    <th style="text-align: center; width: 35%">物料名称</th>
                    <th style="text-align: center; width: 15%">物料单位</th>
                    <th style="text-align: center; width: 15%">物料数量</th>
                    <th style="text-align: center; width: 25%">库存余量</th>
                </tr>
                </thead>

                <tbody id="table-tbody">
                <tr>
                    <td style="text-align: center">1</td>
                    <td style="text-align: center">
                        <form action="">
                            <div>
                                <div>
                                    <div class="dropdown-sin-1">
                                        <select style="width: 100%;border: none;" placeholder="请选择物资名称"></select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </td>
                    <td id="product_unit_1" style="text-align: center"></td>
                    <td id="product_total_number_1" style="text-align: center">
                        <div class="wrapper_1" style="width: 100%; height: 100%"></div>
                        {# 数字选择插件可实现点击+1， -1 #}
                    </td>
                    <td id="real_qty_1" style="text-align: center"></td>
                </tr>
            </table>
            <table style="border-collapse: collapse;border-color: #DCDCDC;border-top: none" cellspacing="0"
                   cellpadding="2" width="100%" border="1">
                <tr>
                    <td style="text-align: center; font-size: 20px; font-weight: bold; font-family: 宋体">备&nbsp;注
                    </td>
                </tr>
                <tr>
                    <td><textarea name="note_duit" id="note" cols="30" rows="5"
                                  style="width: 100%;padding: 10px; border: none;outline: none"></textarea></td>
                </tr>
                </tbody>
            </table>
            <div style="width: 100%;margin-top: 5px;">
                <div style="display: inline-block; width: 75%;">
                    <span style="cursor: pointer" onclick="add_tr()">增加一条 </span>&nbsp;|&nbsp;
                    <span style="cursor: pointer" onclick="del_tr()">减少一条 </span>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/personal_center/js/mock.js"></script>
    <script src="../../static/system_setup/js/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/jquery.dropdown.min.css">
    <script src="../../static/personal_center/js/jquery.dropdown.min.js"></script>
    <script src="../../static/personal_center/js/numberInput.js" type="text/javascript" charset="utf-8"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("zichan").className = "add_class";
            document.getElementById("apply_list").className = "add-nav-active";
            product_objs = {{ product_objs | safe }}
                select_document()
            input_down()

        };

        function add_tr() {
            var table = document.getElementById("table-tbody")
            var tr_num = table.rows.length + 1;
            var html_tr = `
                            <tr>
                                <td style="text-align: center">` + tr_num + `</td>
                                <td style="text-align: center" id="select_depart_` + tr_num + `">
                                    <form action="">
                                        <div>
                                            <div>
                                                <div class="dropdown-sin-` + tr_num + `">
                                                    <select style="width: 100%;border: none;" placeholder="请选择商品名称"></select>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </td>
                                <td id="product_unit_` + tr_num + `" style="text-align: center"></td>
                                <td id="product_total_number_` + tr_num + `" style="text-align: center">
                                    <div class="wrapper_` + tr_num + `" style="width: 100%; height: 100%"></div>
                                </td>
                                <td id="real_qty_` + tr_num + `" style="text-align: center"></td>
                            </tr>
                            `
            $("#table-tbody").append(html_tr);
            select_document(tr_num);
            input_down(tr_num)


        }

        function del_tr() {
            $("#table-tbody tr").eq(-1).remove();
            var table = document.getElementById("table-tbody")
            var rows = table.rows.length;
            var total_price = 0
            for (var i = 0; i < rows + 1; i++) {
                var tag_id = "main_price_" + i;
                var each_price = $("#" + tag_id).text();
                total_price += Number(each_price)
            }
            console.log("total_price: ", total_price)
            document.getElementById("all_total_price").innerText = String(total_price)
        }

        function select_document(tr_num = 1) {
            obj_product = {}  // 创建一个新对象方便后面选择框赋值单位
            obj_products = {}
            for (var jj = 0; jj < product_objs.length; jj++) {
                product_objs[jj]["disabled"] = false
                product_objs[jj]["selected"] = false
                obj_product[product_objs[jj]['id']] = product_objs[jj]['unit']
                obj_products[product_objs[jj]['id']] = product_objs[jj]['real_qty']
            }
            $('.dropdown-sin-' + tr_num + '').dropdown({
                data: product_objs,
                input: '<input type="text" maxLength="20" placeholder="请输入搜索值">',
                choice: function () {
                    var ff = this.name[0]
                    var data_li = ff.match(/ data-id="(.*?)"/)
                    var data_id = data_li[1]
                    var danwei = obj_product[data_id]
                    var real_qty = obj_products[data_id]
                    if (real_qty === 0) {
                        real_qty = 0
                    }
                    {#var total_number = 0#}
                    {#console.log(product_objs)#}
                    {#$("#editable_" + tr_num).val(total_number)    // 选中物资后，将该物资的库存写入到输入框内  计划输入位最大数时不能增加数量#}
                    document.getElementById("product_unit_" + tr_num).innerText = danwei;
                    document.getElementById('real_qty_' + tr_num).innerText = real_qty;
                    document.getElementById('editable_' + tr_num).setAttribute('oninput', 'if(value>' + real_qty + ')value=' + real_qty)
                    document.getElementById('editable_' + tr_num).setAttribute('value', real_qty)
                    document.getElementById('add_num_editable_' + tr_num).setAttribute('onclick', 'panduan(' + tr_num +','+ real_qty + ')')

                }
            });
        }

        function input_down(tr_num = 1) {
            $(function () {
                $(".wrapper_" + tr_num).numInput({
                    width: 100,//宽度
                    positive: true,//允许输入正数
                    negative: false,//允许输入负数
                    //faq：positive，negative不能同时false，同时false按同时为true处理
                    floatCount: 0,//小数点后保留位数
                    wrapperClass: 'num-input-wrap',//最外层容器
                    inputClass: 'num-input',//input输入框
                    addClass: 'add',//增加按钮
                    subtractClass: 'subtract',//减少按钮
                    interval: 1,//增加&减少按钮每次变化的值
                    tr_num: "editable_" + tr_num,
                });
            })
        }

        function sub_data() {
            var date = $("#order_date").text();
            var json_data = []
            var tag_li = document.getElementsByClassName('del')
            var total_qty = 0
            for (var i = 0; i < tag_li.length; i++) {
                var dic_data = {}
                var prodcuct_id = tag_li[i].getAttribute("data-id");
                var k = i + 1
                var unit = $("#product_unit_" + k).text();
                var num = $("#editable_" + k).val();
                dic_data["product_id"] = prodcuct_id
                dic_data['qty'] = num
                dic_data['unit'] = unit
                total_qty += Number(num)
                if (num === '0' || num === 'NaN') {
                    alert('第' + k + '个物资申请数量有误，请检查！')
                    return false
                }
                if (!dic_data["product_id"]){
                    alert('请选择申请物资！')
                    return false
                }
                console.log("dic_data: ", dic_data)
                json_data.push(dic_data)
            }
            if (total_qty === 0) {
                alert('请正确填写申请单！')
                return false
            }
            var note = $('#note').val()
            console.log("date=" + date + "&total_qty=" + total_qty+ "&line_list=" + JSON.stringify(json_data) + "&note=" + String(note))
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/personal-center/product_apply_view", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            xhr.send("date=" + date + "&total_qty=" + total_qty+ "&line_list=" + JSON.stringify(json_data) + "&note=" + String(note))
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate['code'] === 200) {
                            alert("创建成功！")
                            window.location.href = "/personal-center/product_apply_list_view";
                        } else {
                            alert(JsonDate['message'])
                        }
                    }
                }
             }
        }

        function panduan(tr_num, real_qty) {
            var input_num = $("#editable_" + tr_num).val();
            real_qty = Number(real_qty)
            input_num = Number(input_num)
            console.log(real_qty, input_num)
            if (input_num>real_qty) {
                input_num = real_qty
                $("#editable_" + tr_num).val(input_num);
            }
        }

    </script>
{% endblock %}
